<template>
  <div class="page-container container">
    <el-row :gutter="8">
      <el-col :span="16">
        <div class="base-card search-tab">
          <div
            class="tab-item"
            v-for="item in state.searchTabData"
            :key="item.label"
          >
            <img :src="item.imgUrl" @click="turnTo(item.turnToPath)" />
            <span>
              {{ item.label }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="base-card user-card">
          <div class="header">
            <div class="welcome">欢迎回来，{{ state.user.username }}</div>
            <div class="avatar">
              <el-avatar :size="50" :src="state.user.avatarPath" />
              <div class="inf">
                <div>电话：{{ state.user.phone }}</div>
                <div>邮箱：{{ state.user.email }}</div>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="company">
              {{ state.user.dept.name }}
            </div>
            <div class="date">
              创建时间：<span style="font-size: 12px">{{
                state.user.createTime
              }}</span>
            </div>
          </div>
        </div>
        <div class="base-card notice-card">
          <el-tabs
            v-model="state.notice"
            class="demo-tabs"
            v-loading="state.noticeLoading"
          >
            <el-tab-pane label="通知公告" name="first">
              <div class="all-notice" v-if="state.noticeAllData.length != 0">
                <div
                  class="all-notice-item notice-item"
                  v-for="(item, index) in state.noticeAllData"
                  :key="item.title"
                >
                  <div style="font-size: 14px; margin-bottom: 8px">
                    {{ index + 1 }}.{{ item.title }}
                  </div>
                  <div style="color: rgba(0, 0, 0, 0.45)">
                    {{ item.createTime }} 发布
                  </div>
                </div>
              </div>
              <div v-else>暂无</div>
              <el-button
                type="primary"
                style="float: right; margin-top: 4px"
                @click="turnToMyMsg"
              >
                查看更多
              </el-button>
            </el-tab-pane>
            <el-tab-pane label="系统公告" name="second">
              <div class="all-notice" v-if="state.noticeSysData.length != 0">
                <div
                  class="all-notice-item notice-item"
                  v-for="(item, index) in state.noticeSysData"
                  :key="item.title"
                >
                  <div style="font-size: 14px; margin-bottom: 8px">
                    {{ index + 1 }} . {{ item.title }}
                  </div>
                  <div style="color: rgba(0, 0, 0, 0.45)">
                    {{ item.createTime }} 发布
                  </div>
                </div>
              </div>
              <div v-else>暂无</div>
              <el-button
                type="primary"
                style="float: right; margin-top: 4px"
                @click="turnToMyMsg"
              >
                查看更多
              </el-button>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { defineComponent, reactive, ref, onMounted } from "vue";
import { ElNotification } from "element-plus";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import request from "@/public/request";

import yjcx from "@/assets/images/yjcx.svg";
import dcgl from "@/assets/images/dcgl.svg";
import ywgl from "@/assets/images/ywgl.svg";
import ggcx from "@/assets/images/ggcx.svg";
import cwgl from "@/assets/images/cwgl.svg";
import bbgl from "@/assets/images/bbgl.svg";
import xtgl from "@/assets/images/xtgl.svg";
import yggl from "@/assets/images/yggl.svg";

const Store = useStore();
const Route = useRoute();
const Router = useRouter();

const state = reactive({
  user: Store.state.auth.user ?? {
    avatarPath: "",
    username: "",
    phone: "",
    email: "",
    dept: {
      name: "",
    },
    createTime: "",
  },
  searchTabData: [
    {
      imgUrl: yjcx,
      label: "字典管理",
      turnToPath: "/system/dict",
    },
    {
      imgUrl: dcgl,
      label: "接口日志",
      turnToPath: "/system/auditing",
    },
    {
      imgUrl: ywgl,
      label: "异常日志",
      turnToPath: "/system/log",
    },
    {
      imgUrl: ggcx,
      label: "在线用户",
      turnToPath: "/monitor/online",
    },
    {
      imgUrl: cwgl,
      label: "角色管理",
      turnToPath: "/permission/role",
    },
    {
      imgUrl: bbgl,
      label: "菜单管理",
      turnToPath: "/permission/menu",
    },
    {
      imgUrl: xtgl,
      label: "组织管理",
      turnToPath: "/permission/dept",
    },
    {
      imgUrl: yggl,
      label: "用户管理",
      turnToPath: "/permission/user",
    },
  ],
  notice: "first",
  noticeLoading: false,
  noticeAllData: [],
  noticeSysData: [],
});
// 功能模块点击跳转
const turnTo = (path) => {
  if (path) {
    Router.openTab(path);
  } else {
    ElMessage.warning("暂无页面");
  }
};
// 获取消息数据
const getNotice = async () => {
  state.noticeLoading = true;
  const noticeAll = await request.get("/api/noticesend/query", {
    Category: 1,
    PageIndex: 1,
    PageSize: 10,
  });
  const noticeSys = await request.get("/api/noticesend/query", {
    Category: 2,
    PageIndex: 1,
    PageSize: 10,
  });
  const allPromise = [noticeAll, noticeSys];
  Promise.allSettled(allPromise)
    .then((results) => {
      state.noticeLoading = false;
      results.forEach((result, index) => {
        if (result.status == "fulfilled") {
          if (index == 0) {
            state.noticeAllData = result.value.content;
          } else if (index == 1) {
            state.noticeSysData = result.value.content;
          }
        } else {
          console.error(result.reason);
        }
      });
    })
    .finally(() => {
      state.noticeLoading = false;
    });
};
// 跳转消息详情页
const turnToMyMsg = () => {
  Router.openTab("/message/myMsg");
};
onMounted(() => {
  console.log("refresh");
  getNotice();
});
</script>

<style lang="scss" scoped>
.container {
  height: auto;
}

.base-card {
  width: 100%;
  height: auto;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
  background-color: #fff;
}

.search-tab {
  height: 100px;
  padding: 16px;
  display: flex;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: 40px;
      height: 40px;
      margin-bottom: 8px;
      cursor: pointer;
    }
  }
}

.user-card {
  padding: 0;

  .header {
    padding: 16px;
    border-radius: 4px;
    background-image: linear-gradient(180deg, #68a6ff, #2a4e87);

    .welcome {
      font-size: 16px;
      color: #fff;
      font-weight: 600;
      margin-bottom: 30px;
    }

    .avatar {
      display: flex;

      img {
      }

      .inf {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 8px;
        color: #fff;

        div:first-child {
          margin: 2px 0;
        }
      }
    }
  }

  .content {
    padding: 16px;
    font-size: 14px;

    div:first-child {
      margin-bottom: 8px;
    }
  }
}

.notice-card {
  padding: 0px 16px 16px 16px;

  :deep(.el-tab-pane) {
    .all-notice {
      min-height: 100px;
      max-height: 300px;
      overflow-y: auto;

      .all-notice-item {
        border-bottom: 1px solid #dadada;
      }

      .all-notice-item:first-child {
        border-top: 1px solid #dadada;
      }
    }

    .system-notice {
      color: yellow;

      .item:last-child {
        border-bottom: 1px solid gray;
      }
    }

    .notice-item {
      padding: 8px;
    }
  }
}

.test {
  width: 100%;
  height: 50px;
  background-color: red;
}
</style>
